import React, { useState } from 'react';
import History from 'beta/containers/history/History';
import { HistoryFilters } from 'beta/containers/history/historyFilters';
import ServiceWrapper from 'beta/containers/layout/ServiceWrapper';
import { IContext } from 'beta/typings/context';
import { useRouter } from 'next/router';
import { useContractsQuery } from 'typings/graphql';

const Sagan = () => {
  const router = useRouter();
  const serviceId = router?.query?.serviceId ?? '';
  const customerId = router?.query?.customerId ?? '';
  const [filter, setFilter] = useState('All');
  const onSelect = (item: string) => {
    setFilter(item);
  };
  const { data: contractData } = useContractsQuery({
    variables: {
      input: {
        serviceId: serviceId.toString(),
        customerId: customerId.toString(),
      },
    },
    skip: !serviceId || !customerId,
  });
  const contracts = contractData?.contracts?.contracts;
  const historyIds = contracts
    ? [serviceId, ...contracts.map((contract) => contract.id)].flat()
    : [];

  return (
    <ServiceWrapper>
      <HistoryFilters color="purple" onSelect={onSelect} />
      <History category={filter} regardingIds={historyIds?.flat()} />
    </ServiceWrapper>
  );
};

Sagan.getInitialProps = ({ pathname, query }: IContext) => {
  return {
    pathname,
    contractId: query.contractId,
    namespacesRequired: ['service', 'errors'],
  };
};

export default Sagan;